<template>
  <div>
    <Drawer title="商品品牌" v-model="goodsCategoryBrandDrawer" width="1020" @on-close="closeDrawer" :scrollable="true">
      <GoodsBrandMainMultiple ref="goodsBrandMainMultipleShow" @closeDrawer="closeDrawer" @showAddModal="showAddModal" @refresh="refresh"/>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="closeDrawer">取消</Button>
        <Button type="primary" @click="closeDrawer">关闭</Button>
      </div>
    </Drawer>
    <Modal v-model="modal.brandAddModal" title="新增" :mask-closable="true" width="1020">
      <GoodsBrandMainMultiple ref="goodsBrandMainMultipleAdd" optType="add" @closeAddModal="closeAddModal" @refresh="refresh"/>
       <div slot="footer">
            <Button type="text" size="large" @click="closeAddModal">取消</Button>
            <Button type="primary" size="large" @click="updateBrand">确认选择</Button>
        </div>
    </Modal>
  </div>
</template>

<script>
import GoodsBrandMainMultiple from '@/view/goods-brand/GoodsBrandMainMultiple.vue'
import GoodsCategoryMainSingle from '../goods-category/GoodsCategoryMainSingle.vue'
import * as utils from '@/api/utils-v2.js'
import * as ResponseStatus from '@/api/response-status'
export default {
  name: 'goodsCategoryBrandDrawer',
  components: {
    GoodsBrandMainMultiple,
    GoodsCategoryMainSingle
  },
  data() {
    return {
      goodsCategoryBrandDrawer: false,
      modal: {
        choice: false,
        brandAddModal: false
      },
      urls: {
        listBrandByCategoryIdUrl: '/goods-category-brand/admin/all-cond',
        oneCategoryUrl: '/goods-category/admin/one/'
      },
      goodsCategoryId: null
    }
  },
  computed: {},
  mounted() {},
  methods: {
    initData(categoryId) {
      this.goodsCategoryId = categoryId
      var params = {
        categoryId: categoryId
      }
      utils.doPostJson(this.urls.listBrandByCategoryIdUrl, params, {}).then(res => {
          const data = res.data
          if (data.code !== ResponseStatus.OK) {
            this.$Message.error(data.message)
            return
          }
            
          let goodsBrandMainMultipleAdd = this.$refs.goodsBrandMainMultipleAdd
          this.goodsCategoryBrandDrawer = true
          goodsBrandMainMultipleAdd.selectedData = data.data.rows
          goodsBrandMainMultipleAdd.selectedDataIdProp = 'brandId'
          goodsBrandMainMultipleAdd.extraData.categoryId = categoryId
          let goodsBrandMainMultipleShow = this.$refs.goodsBrandMainMultipleShow
          let brandIds = [0]
          data.data.rows.forEach(row => {
            brandIds.push(row.brandId)
          })
          goodsBrandMainMultipleShow.$refs.searchModal.searchForm.ids = brandIds
           goodsBrandMainMultipleShow.extraData.categoryId = categoryId
          goodsBrandMainMultipleShow.searchTable(false, true)
        }).catch(err => {
          this.$Message.error(err)
        })
    },
    showAddModal() {
      this.modal.brandAddModal = true
      let goodsBrandMainMultipleAdd = this.$refs.goodsBrandMainMultipleAdd
      goodsBrandMainMultipleAdd.searchTable(false, true)
    },
    closeDrawer() {
      this.goodsCategoryBrandDrawer = false
    },
    closeAddModal() {
      this.modal.brandAddModal = false
    },
    updateBrand() {
      this.$refs.goodsBrandMainMultipleAdd.confirmSelection()
    },
    showModal(modal) {
      utils.showModal(this, modal)
    },
    refresh(userId) {
      this.initData(userId)
    },
  }
}
</script>

<style>
.demo-drawer-footer {
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
